<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI 图像生成器 - 科技版</title>
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
    <!-- 背景粒子效果 -->
    <div class="particles" id="particles"></div>
    
    <!-- 主容器 -->
    <div class="container">
        <!-- 头部 -->
        <header class="header">
            <div class="logo">
                <div class="logo-icon">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M12 2L2 7l10 5 10-5-10-5z"/>
                        <path d="M2 17l10 5 10-5"/>
                        <path d="M2 12l10 5 10-5"/>
                    </svg>
                </div>
                <h1>AI 图像生成器</h1>
            </div>
            <div class="status-indicator" id="statusIndicator">
                <div class="status-dot"></div>
                <span>就绪</span>
            </div>
        </header>

        <!-- 模式切换 -->
        <div class="mode-switcher">
            <button class="mode-btn active" data-mode="generate">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
                    <circle cx="8.5" cy="8.5" r="1.5"/>
                    <polyline points="21,15 16,10 5,21"/>
                </svg>
                图像编辑
            </button>
            <button class="mode-btn" data-mode="create">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M12 2L2 7l10 5 10-5-10-5z"/>
                    <path d="M2 17l10 5 10-5"/>
                    <path d="M2 12l10 5 10-5"/>
                </svg>
                图像生成
            </button>
        </div>

        <!-- 主要内容区域 -->
        <main class="main-content">
            <!-- 图像编辑模式 -->
            <div class="mode-panel active" id="generatePanel">
                <div class="input-section">
                    <div class="upload-area" id="uploadArea">
                        <div class="upload-content">
                            <svg class="upload-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
                                <polyline points="7,10 12,15 17,10"/>
                                <line x1="12" y1="15" x2="12" y2="3"/>
                            </svg>
                            <p class="upload-text">拖拽图片到此处或点击上传</p>
                            <p class="upload-hint">支持 JPG, PNG, WebP 格式</p>
                        </div>
                        <input type="file" id="imageInput" accept="image/*" hidden>
                    </div>
                    
                    <div class="url-input">
                        <label>或输入图片URL</label>
                        <input type="url" id="imageUrl" placeholder="https://example.com/image.jpg">
                    </div>

                    <div class="prompt-section">
                        <label>编辑提示词</label>
                        <textarea id="editPrompt" placeholder="描述你想要的编辑效果..."></textarea>
                    </div>

                    <div class="negative-prompt">
                        <label>负面提示词（可选）</label>
                        <textarea id="negativePrompt" placeholder="描述不想要的内容..."></textarea>
                    </div>

                    <!-- 图片信息显示 -->
                    <div class="image-info" id="imageInfo" style="display: none;">
                        <div class="info-item">
                            <label>图片分辨率:</label>
                            <span id="imageResolution">-</span>
                        </div>
                        <div class="info-item">
                            <label>文件大小:</label>
                            <span id="imageSize">-</span>
                        </div>
                    </div>
                </div>

                <div class="preview-section">
                    <div class="preview-container">
                        <div class="preview-placeholder" id="previewPlaceholder">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
                                <circle cx="8.5" cy="8.5" r="1.5"/>
                                <polyline points="21,15 16,10 5,21"/>
                            </svg>
                            <p>预览区域</p>
                        </div>
                        <img id="previewImage" class="preview-image" style="display: none;">
                    </div>
                </div>
            </div>

            <!-- 图像生成模式 -->
            <div class="mode-panel" id="createPanel">
                <div class="input-section">
                    <div class="prompt-section">
                        <label>生成提示词</label>
                        <textarea id="createPrompt" placeholder="描述你想要生成的图像..."></textarea>
                    </div>

                    <div class="style-presets">
                        <label>风格预设</label>
                        <div class="preset-grid">
                            <button class="preset-btn" data-style="realistic">写实风格</button>
                            <button class="preset-btn" data-style="anime">动漫风格</button>
                            <button class="preset-btn" data-style="artistic">艺术风格</button>
                            <button class="preset-btn" data-style="cyberpunk">赛博朋克</button>
                        </div>
                    </div>

                    <div class="negative-prompt">
                        <label>负面提示词（可选）</label>
                        <textarea id="createNegativePrompt" placeholder="描述不想要的内容..."></textarea>
                    </div>
                </div>

                <div class="preview-section">
                    <div class="preview-container">
                        <div class="preview-placeholder" id="createPreviewPlaceholder">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M12 2L2 7l10 5 10-5-10-5z"/>
                                <path d="M2 17l10 5 10-5"/>
                                <path d="M2 12l10 5 10-5"/>
                            </svg>
                            <p>生成预览</p>
                        </div>
                        <img id="createPreviewImage" class="preview-image" style="display: none;">
                    </div>
                </div>
            </div>
        </main>

        <!-- 参数设置面板 -->
        <div class="params-panel">
            <div class="params-header">
                <h3>高级参数</h3>
                <button class="toggle-btn" id="paramsToggle">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <polyline points="6,9 12,15 18,9"/>
                    </svg>
                </button>
            </div>
            
            <div class="params-content" id="paramsContent">

                <div class="param-group">
                    <label>图片尺寸</label>
                    <select id="sizeSelect">
                        <option value="original" id="originalSizeOption" style="display: none;">原图分辨率</option>
                        <option value="1024x1024">1024×1024 (正方形)</option>
                        <option value="1024x768">1024×768 (横屏)</option>
                        <option value="768x1024">768×1024 (竖屏)</option>
                        <option value="512x512">512×512 (小图)</option>
                    </select>
                </div>

                <div class="param-group">
                    <label>生成步数: <span id="stepsValue">50</span></label>
                    <input type="range" id="stepsSlider" min="10" max="50" value="50">
                </div>

                <div class="param-group">
                    <label>引导强度: <span id="guidanceValue">3.5</span></label>
                    <input type="range" id="guidanceSlider" min="1" max="10" step="0.1" value="3.5">
                </div>

                <div class="param-group">
                    <label>随机种子: <span id="seedValue">12345</span></label>
                    <div class="seed-input-group">
                        <input type="number" id="seedInput" value="12345">
                        <button class="random-btn" id="randomSeed">随机</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 控制按钮 -->
        <div class="controls">
            <button class="generate-btn" id="generateBtn">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/>
                </svg>
                开始生成
            </button>
            
            <button class="reset-btn" id="resetBtn">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <polyline points="1,4 1,10 7,10"/>
                    <path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"/>
                </svg>
                重置
            </button>
        </div>

        <!-- 进度条 -->
        <div class="progress-container" id="progressContainer" style="display: none;">
            <div class="progress-bar">
                <div class="progress-fill" id="progressFill"></div>
            </div>
            <div class="progress-text" id="progressText">正在生成中...</div>
        </div>

        <!-- 结果展示 -->
        <div class="result-section" id="resultSection" style="display: none;">
            <div class="result-header">
                <h3>生成结果</h3>
                <button class="close-btn" id="closeResult">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <line x1="18" y1="6" x2="6" y2="18"/>
                        <line x1="6" y1="6" x2="18" y2="18"/>
                    </svg>
                </button>
            </div>
            <div class="result-content">
                <img id="resultImage" class="result-image">
                <div class="result-actions">
                    <button class="action-btn download-btn" id="downloadBtn">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
                            <polyline points="7,10 12,15 17,10"/>
                            <line x1="12" y1="15" x2="12" y2="3"/>
                        </svg>
                        下载
                    </button>
                    <button class="action-btn copy-btn" id="copyBtn">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <rect x="9" y="9" width="13" height="13" rx="2" ry="2"/>
                            <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>
                        </svg>
                        复制链接
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 通知组件 -->
    <div class="notification" id="notification">
        <div class="notification-content">
            <div class="notification-icon">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M9 12l2 2 4-4"/>
                    <circle cx="12" cy="12" r="10"/>
                </svg>
            </div>
            <div class="notification-text" id="notificationText"></div>
        </div>
    </div>

    <!-- 版权信息 -->
    <footer class="footer">
        <div class="footer-content">
            <p class="footer-text">
                由<a href="https://www.modelscope.cn/models" target="_blank" rel="noopener noreferrer" class="footer-link">ModelScope社区</a>提供模型API & <a href="https://www.yuque.com/jasonxue/eruse9/wxtzlgluig4mgsyz" target="_blank" rel="noopener noreferrer" class="footer-link">AIGC 共创社区</a>提供页面及中专服务
            </p>
            <p class="copyright">
                © 2025 AI Image Generator. All rights reserved.
            </p>
        </div>
    </footer>

    <script src="script.js"></script>
</body>
</html>
